<template>
  <div class="new_footer">
    <div class="f_left">
      <div class="title">
        <Title1 title="景区客流量数据统计"></Title1>
      </div>
      <div class="f_l_con">
        <div class="f_l_con_top">
          <img src="@/assets/images/newImg/tourist.png" alt="" />
          <div v-for="(i1, index1) in touristFlowObj.total" :key="index1">
            <p class="i1_name">{{ i1.name }}</p>
            <p
              class="i1_value"
              :style="{ color: index1 != 0 ? '#06E6E8' : '' }"
            >
              {{ i1.value }}
            </p>
          </div>
        </div>
        <div class="f_l_con_bottom">
          <div
            class="b_item"
            v-for="(i2, index2) in touristFlowObj.distribution"
            :key="index2"
          >
            <Echarts
              :idIndex="index2"
              :nums="(i2.value / touristFlowObj.total[0].value) * 100"
              style="width: 100%; height: 100%"
            />
            <p>
              <span>{{ i2.name }}</span>
              <span>{{ i2.value }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="f_right">
      <div class="title">
        <Title1 title="各文旅场所入园数据"></Title1>
      </div>
      <div id="rightEchar" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import Title1 from "./Title1.vue";
import Title2 from "./Title2.vue";
import Echarts from "../components/footerEchar.vue";

export default {
  components: {
    Title1,
    Title2,
    Echarts,
  },
  props: {},
  computed: {},
  watch: {},
  data() {
    return {
      touristFlowObj: {
        total: [
          {
            name: "访客总数",
            value: 11926,
          },
          {
            name: "男性游客",
            value: 5926,
          },
          {
            name: "女性游客",
            value: 5000,
          },
        ],

        distribution: [
          {
            name: "幼童",
            value: 2000,
          },
          {
            name: "青年",
            value: 3000,
          },
          {
            name: "中年",
            value: 3500,
          },
          {
            name: "老年",
            value: 3426,
          },
        ],
      },
      myRightEchar: null,
    };
  },
  methods: {
    setRightEchar() {
      this.myRightEchar = echarts.init(document.getElementById("rightEchar"));
      let noramlSize = 16;
      var datas = {
        colors: ["#1CA6C0", "#00CEA0", "#CECE41", "#FFCC01", "#E18E5F"],
        dataArr: [
          {
            value: 335,
            name: "景区",
          },
          {
            value: 210,
            name: "农家乐",
          },
          {
            value: 110,
            name: "书社",
          },
          {
            value: 410,
            name: "文旅场馆",
          },
          {
            value: 410,
            name: "电影院",
          },
        ],
        company: "万人",
      };
      let legendArr = datas.dataArr.map((v) => {
        return v.name;
      });
      const total = datas.dataArr.reduce(
        (accumulator, currentValue) => accumulator + currentValue.value,
        0
      );
      console.log(total);

      let option = {
        color: datas.colors,
        title: {
          text: total,
          subtext: "万人",
          left: "35%",
          top: "38%",
          textAlign: "center",
          textStyle: {
            color: "#f4c434",
            align: "center",
          },
          subtextStyle: {
            color: "#50739a",
            align: "center",
          },
        },
        grid: {
          // left: "30%",
          // right: 100,
          // bottom: "15%",
          // top: "5%",
        },

        // tooltip: {
        //   trigger: "item",
        //   backgroundColor: "#f6f6f6",
        //   textStyle: {
        //     color: "#000",
        //   },
        //   formatter: "{b}: {c}" + datas.company + " ({d}%)",
        // },
        legend: {
          icon: "circle",
          right: 0,
          top: "center",
          orient: "vertical",
          itemGap: 14,
          textStyle: {
            color: "#fff",
            fontSize: noramlSize,
          },
          formatter: function (name) {
            let index = legendArr.indexOf(name);
            return name + datas.dataArr[index].value;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "55%"],
            center: ["36%", "45%"],
            itemStyle: {
              normal: {
                borderWidth: 10,
              },
            },
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: "#138af4",
                },
                length: 20,
                length2: 50,
              },
            },
            data: datas.dataArr,
          },
          {
            type: "pie",
            radius: "40%",
            center: ["36%", "45%"],
            z: -2,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: "rgba(255,255,255,0.2)",
            },
            data: [100],
          },
          // {
          //   type: "pie",
          //   radius: "30%",
          //   center: ["40%", "45%"],
          //   z: -1,
          //   label: {
          //     show: false,
          //   },
          //   labelLine: {
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: "rgba(255,255,255,0.2)",
          //   },
          //   data: [100],
          // },
        ],
      };
      this.myRightEchar.setOption(option);

      window.addEventListener("resize", () => {
        this.myRightEchar?.resize();
      });
    },
    getImgSrc(index) {
      return require(`@/assets/images/newImg/rightImg/${index}.png`);
    },
  },
  mounted() {
    this.setRightEchar();
  },
  created() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

img {
  @include px2vw(width, 76);
  @include px2vh(height, 88);
}

.new_footer {
  width: 100%;
  height: 100%;
  @include px2vw(padding-left, 6);
  @include px2vw(padding-right, 6);
  @include px2vh(padding-top, 13);
  @include px2vh(padding-bottom, 13);
  color: #fff;
  @include px2font(16);
  display: flex;
  .f_left,
  .f_right {
    width: 50%;
    height: 100%;
  }
  .f_left {
    @include px2vw(margin-right, 77);
    img {
      @include px2vw(width, 82);
      @include px2vh(height, 82);
    }
    .f_l_con {
      padding: 2% 1%;
      .f_l_con_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        color: #fff;
        @include px2font(18);
        .i1_name {
        }
        .i1_value {
          @include px2font(28);
          color: #ffe04d;
        }
      }
      .f_l_con_bottom {
        width: 100%;
        @include px2vh(height, 100);
        display: flex;
        align-items: center;
        .b_item {
          text-align: center;
          width: 100%;
          height: 100%;

          p {
            color: #fff;
            @include px2font(14);
            span {
              &:last-child {
                display: inline-block;
                color: rgba(6, 230, 232, 1);
                @include px2font(18);
                @include px2vw(margin-left, 8);
              }
            }
          }
        }
      }
    }
  }
}
</style>
